import Vue from 'vue'

// 自定义聚焦指令
Vue.directive('jujiao', {
  // 只触发一次
  inserted (el) {
    focus(el)
  },
  // 指令所在组件发生更新时候触发
  update (el) {
    focus(el)
  }
})

function focus (el) {
  // 如果jujiao指令作用在原生标签上，el就是原生DOM元素
  // 如果jujiao指令作用在组件上上，el就是组件的根元素的原生DOM

  // 1. 如果 el 本就是 输入框 或者 文本域 ，直接让其聚焦
  if (['INPUT', 'TEXTAREA'].includes(el.tagName)) {
    el.focus()
    return
  }
  // 2. 如果el不是输入框 或者 文本域 ，尝试查找子元素有没有输入框 或者 文本域，
  // 如果找到了，让子元素聚焦；否则抛出错误
  let node = el.querySelector('input')
  if (node) {
    node.focus()
    return
  }
  node = el.querySelector('textarea')
  if (node) {
    node.focus()
    return
  }
  throw new Error('请把jujiao指令用在input或者textarea上')
}
